import { Form, FormInstance, Input, Select } from 'antd';
import { useEffect } from "react";
import mStl from './project-form.mod.less';
import { projectAPI } from "../../../apis/project";
import randomString from "string-random";

const { Option } = Select;

export interface ProjectInfo {
  name: string;
  platform: string;
  host: string;
  id: string;
}

export interface ProjectForm {
  form: FormInstance<any>;
  isEdit?: boolean;
  formInfo?: ProjectInfo|null;
  setSubmitLoading?: (loading: boolean) => void;
  onSubmitSuccess?: () => void;
}

const initForm = {
  name: undefined,
  platform: undefined,
  app_host: undefined,
  app_secret: undefined
}

/**
 * @desc 用户编辑
 * @param props
 * @constructor
 */
const ProjectForm = (props: ProjectForm) => {
  const form = props.form;

  useEffect(() => {
    if(props.formInfo) {
      form.setFieldsValue({ ...props.formInfo });
    } else {
      form.resetFields();
      refreshKey();
      // form.setFieldsValue({ ...initForm });
    }
  }, [props.isEdit, props.formInfo])

  /**
   * @desc 提交表单
   * @param values
   */
  const onFinish = (values: ProjectInfo) => {
    let params = { ...values };
    if (props.isEdit) {
      params.id = (props as any).formInfo.id;
    }
    let promise = projectAPI.projectAdd(params);

    if (props.setSubmitLoading) {
      props.setSubmitLoading(true);
    }

    promise.then((res: any) => {
      if (res && res.success) {
        if (props.onSubmitSuccess) {
          props.onSubmitSuccess();
        }
      }
    }).finally(() => {
      if (props.setSubmitLoading) {
        props.setSubmitLoading(false);
      }
    })
  }

  function refreshKey() {
    form.setFieldsValue({
      app_secret: randomString(16, true)
    })
  }

  const layout = {
    labelCol: { span: 24 },
  }
  
  return (
    <>
      <Form
        className={mStl['form']}
        {...layout}
        form={form}
        name="projectForm"
        size={"middle"}
        labelAlign={"right"}
        onFinish={onFinish}
      >
        <Form.Item
          label="平台"
          name="platform"
          rules={[{ required: true, message: '必选' }]}
        >
          <Select placeholder="请选择" disabled={props.isEdit}>
            <Option value="javascript">javascript</Option>
          </Select>
        </Form.Item>

        <Form.Item
          label={"绑定域名"}
          name="app_host"
          rules={[{ required: true, message: '必填' }]}
        >
          <Input placeholder={"请输入"}/>
        </Form.Item>
        <Form.Item
          label={"应用名称"}
          name="name"
          rules={[{ required: true, message: '必填' }]}
        >
          <Input placeholder={"请输入"}/>
        </Form.Item>
        <Form.Item
          label={"应用密钥"}
          name="app_secret"
          rules={[{ required: true, message: '必填' }]}
        >
          <Input
            addonAfter={ !props.isEdit && <span onClick={refreshKey} className={"ui-pointer"}>刷新</span> }
            placeholder={"请输入"}
            disabled={true}
          />
        </Form.Item>
      </Form>
    </>
  );
};

export default ProjectForm;
